import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import MySlideNav from "@/components/MySlideNav";
import TopBar from "@/components/TopBar";

interface IProps {
  children?: ReactNode;
}

const Outside: FC<IProps> = ({ children }) => {
  return (
    <>
      <div
        className="w-1/6 h-screen"
        style={{ backgroundColor: "rgba(0, 0, 0, 0.315)" }}
      >
        <MySlideNav />
      </div>
      <div className="w-5/6 h-screen flex flex-col">
        {/* 添加 shrink-0 防止顶部栏被压缩 */}
        <div className="top-bar shrink-0">
          <TopBar />
        </div>
        {/* 使用 flex-1 填充剩余空间 */}
        <div className="first-body flex-1 overflow-auto">
          <div className="w-full h-full flex justify-center items-center p-4">
            {children}
          </div>
        </div>
      </div>
    </>
  );
};
export default memo(Outside);
